<template>
	<view class="notice-page">
		<!-- 顶部Tab -->
		<up-tabs :list="tabs" @change="handleTabChange" lineColor="#5B8CFF"></up-tabs>

		<!-- 公告列表 -->
		<scroll-view scroll-y class="scroll-container" :refresher-enabled="true" :refresher-triggered="refreshing"
			@refresherrefresh="onRefresh" @refresherrestore="onRestore">
			
			<!-- 骨架屏 -->
			<view class="skeleton-container" v-if="loading && notices.length === 0">
				<view class="skeleton-item" v-for="i in 3" :key="i">
					<view class="skeleton-title skeleton-animate"></view>
					<view class="skeleton-meta skeleton-animate"></view>
				</view>
			</view>

			<!-- 公告列表 -->
			<view class="notice-list" v-else-if="notices.length > 0">
				<view 
					class="notice-item" 
					v-for="notice in notices" 
					:key="notice.id"
					@click="handleNoticeClick(notice.id)"
				>
					<view class="notice-header">
						<up-tag 
							:text="notice.type" 
							:type="getNoticeTypeColor(notice.type)" 
							plain 
							size="mini"
						></up-tag>
						<text class="notice-time">{{ notice.createTime }}</text>
					</view>
					<text class="notice-title">{{ notice.title }}</text>
					<text class="notice-content">{{ notice.content }}</text>
				</view>
			</view>

			<!-- 空状态 -->
			<view class="empty-state" v-else>
				<up-icon name="file-text" size="80" color="#cccccc"></up-icon>
				<text class="empty-text">暂无公告</text>
			</view>
		</scroll-view>
	</view>
</template>

<script setup>
import { ref } from 'vue';

// Tab标签
const tabs = ref([
	{ name: '全部' },
	{ name: '通知' },
	{ name: '优化' },
	{ name: '活动' }
]);

// 当前Tab
const currentTab = ref(0);

// 公告列表
const notices = ref([
	{
		id: 1,
		type: '通知',
		title: '校园平台更新公告',
		content: '为了给大家带来更好的体验，平台已完成新版本更新，增加了交易区和求助区功能...',
		createTime: '2025-10-30 10:00'
	},
	{
		id: 2,
		type: '优化',
		title: 'UI界面全面优化',
		content: '本次更新对整体界面进行了优化，采用了更简洁的设计风格，提升了用户体验...',
		createTime: '2025-10-29 15:30'
	},
	{
		id: 3,
		type: '活动',
		title: '校园编程大赛报名开始',
		content: '一年一度的校园编程大赛即将开始，欢迎各位同学踊跃报名参加...',
		createTime: '2025-10-28 09:00'
	},
	{
		id: 4,
		type: '通知',
		title: '平台维护通知',
		content: '为了系统稳定运行，平台将于本周六凌晨2:00-4:00进行维护，期间无法访问...',
		createTime: '2025-10-27 18:00'
	}
]);

// 加载状态
const loading = ref(false);
const refreshing = ref(false);

// Tab切换
const handleTabChange = (index) => {
	currentTab.value = index;
	// 根据tab筛选公告
};

// 下拉刷新
const onRefresh = () => {
	refreshing.value = true;
};

const onRestore = () => {
	refreshing.value = false;
};

// 公告点击
const handleNoticeClick = (id) => {
	uni.navigateTo({
		url: `/pages/notice/noticeDetail?id=${id}`
	});
};

// 获取公告类型颜色
const getNoticeTypeColor = (type) => {
	const colorMap = {
		'通知': 'primary',
		'优化': 'success',
		'活动': 'warning'
	};
	return colorMap[type] || 'info';
};
</script>

<style lang="scss" scoped>
@import '../../styles/variables.scss';
@import '../../styles/mixins.scss';

.notice-page {
	min-height: 100vh;
	background: $bg-page;

	.scroll-container {
		height: calc(100vh - 90rpx);
		padding: $spacing-base;
	}

	// 骨架屏
	.skeleton-container {
		.skeleton-item {
			@include card;
			padding: $spacing-lg;
			margin-bottom: $spacing-base;

			.skeleton-title {
				height: 40rpx;
				background: $border-light;
				border-radius: $radius-sm;
				margin-bottom: $spacing-base;
				width: 70%;
			}

			.skeleton-meta {
				height: 28rpx;
				background: $border-light;
				border-radius: $radius-sm;
				width: 100%;
			}

			.skeleton-animate {
				@include skeleton-animation;
			}
		}
	}

	// 公告列表
	.notice-list {
		.notice-item {
			@include card;
			padding: $spacing-lg;
			margin-bottom: $spacing-base;

			.notice-header {
				@include flex-between;
				margin-bottom: $spacing-sm;

				.notice-time {
					font-size: $font-xs;
					color: $text-tertiary;
				}
			}

			.notice-title {
				display: block;
				font-size: $font-lg;
				font-weight: $font-semibold;
				color: $text-primary;
				margin-bottom: $spacing-sm;
			}

			.notice-content {
				display: block;
				font-size: $font-sm;
				color: $text-secondary;
				line-height: $line-height-base;
				@include ellipsis(2);
			}
		}
	}

	// 空状态
	.empty-state {
		@include flex-center;
		flex-direction: column;
		padding: 200rpx 0;
		gap: $spacing-md;

		.empty-text {
			font-size: $font-base;
			color: $text-tertiary;
		}
	}
}
</style>

